<template>
  <el-card :body-style="{ padding: '10px 20px 20px 20px' }" class="project-card">
    <div class="project-header">
      <h3>{{ project.projectName || '未命名项目' }}</h3>
    </div>

    <el-divider style="margin-top: 2px; margin-bottom: 8px;"></el-divider>

    <!-- 项目信息 -->
    <div class="project-body">
      <p><strong>评估金额:</strong> {{ project.amount}}￥</p>
      <p>
        <strong>评估状态:</strong>
        <el-tag :type="getStatusType(project.status)">
          {{ getStatusLabel(project.status) }}
        </el-tag>
      </p>
      <p><strong>创建时间:</strong> {{ formatDate(project.createTime) }}</p>
      <p><strong>完成时间:</strong> {{ formatDate(project.completeTime) || '未完成' }}</p>
      <p class="remark-text">
        <strong>备注信息:</strong> {{ project.remark || '无备注' }}
      </p>
    </div>

    <!-- 按钮组 -->
    <div class="project-actions">
      <el-button type="primary" plain @click="$emit('view', project)">查看</el-button>
      <el-button type="success" plain @click="$emit('export', project)">下载</el-button>
    </div>
  </el-card>
</template>



<script lang="ts" setup>
import { ElCard, ElButton, ElTag, ElDivider } from 'element-plus';

const props = defineProps<{
  project: {
    projectId:string;
    projectName: string;
    amount?: number;
    status: string;
    createTime?: string;
    completeTime?: string;
    remark?: string;
  };
}>();

const emit = defineEmits<{
  (e: 'view', project: any): void;
  (e: 'export', project: any): void;
}>();

const getStatusLabel = (status: string) => {
  switch (status) {
    case '0':
      return '未评审';
    case '1':
      return '评审中';
    case '2':
      return '已通过';
    case '3':
      return '未通过';
    default:
      return '未知状态';
  }
};

const getStatusType = (status: string) => {
  switch (status) {
    case '0':
      return 'info';
    case '1':
      return 'danger';
    case '2':
      return 'success';
    case '3':
      return 'primary';
    default:
      return 'info';
  }
};

const formatDate = (date?: string | Date) => {
  if (!date) return '未知日期';
  const d = new Date(date);
  if (isNaN(d.getTime())) return '无效日期';
  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
};
</script>

<style lang="scss" scoped>
.project-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 10px 20px 20px 20px;
  position: relative; /* 为了让按钮可以绝对定位 */
}

.project-header {
  h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
  }
}

.project-body {
  text-align: left;

  p {
    margin: 5px 0;

    strong {
      margin-right: 5px;
    }
  }

  .remark-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.project-actions {
  position: absolute;
  bottom: 6px;
  right: 8px;
  display: flex;
  gap: 8px;
}

</style>
